<template>
	<view>
		<custom-header title="账号安全" />
		<view class="_wrap">
			<view class="form_wrap">
				<view class="form_item">
					<view class="label">绑定手机号</view>
					<view class="value" @click="handleEditPhone">
						{{userInfo.phone}}
						<image src="/static/common/right1.png" mode="" class="right"></image>
					</view>
				</view>
				<view class="form_item" @click="handleWriteOff">
					<view class="label">账号注销</view>
					<view class="value">
						<image src="/static/common/right1.png" mode="" class="right"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { objectToQueryString } from '../../utils/util.js'
	import { getUserInfo } from '@/utils/request'

	const userInfo = ref(getUserInfo())
	
	const handleEditPhone = ()=>{
		let params = {
			field:'',
			type:'account',
			title:'手机号码',
			placeholder:'',
			value:'',
			id:''
		}
		uni.navigateTo({
			url:`/pages/editInput/editInput?${objectToQueryString({...params})}`
		})
	}
	const handleWriteOff = ()=>{
		uni.navigateTo({
			url:`/pages/writeOff/writeOff`
		})
	}
	
</script>

<style lang="scss">
	._wrap{
		padding: 0 25rpx;
	}
	.form_wrap{
		margin-top: 20rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		padding: 0 25rpx;
		font-size: 28rpx;
		color: #555555;
		.form_item{
			display: flex;
			align-items: center;
			padding: 25rpx 0;
			justify-content: space-between;
			.label{
				width: 180rpx;
			}
			.value{
				flex: 1;
				text-align: justify;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				text.text{
					display: block;
					flex: 1;
				}
				image.right{
					width: 20rpx;
					height: 20rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
</style>
